<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>Bootstrap样式</title>
<meta name='Keywords' content=''>
<meta name='Description' content=''>
<script type='text/javascript' src='js/jquery-1.8.3.min.js'></script>
<script type='text/javascript' src='js/fyz-1.1.4.js'></script>
<style type='text/css'>
*{margin:0px; padding:0px; list-style-type:none; text-decoration:none;}
div.bgred{background:red;}
div.bjred{background:red;}
div.bgr{background:red;}
div.bjr{background:red;}
div.bgorange{background:orange;}
div.bjorange{background:orange;}
div.bgo{background:orange;}
div.bjo{background:orange;}
div.bgyellow{background:yellow;}
div.bjyellow{background:yellow;}
div.bgy{background:yellow;}
div.bjy{background:yellow;}
div.bggreen{background:green;}
div.bjgreen{background:green;}
div.bgg{background:green;}
div.bjg{background:green;}
div.bgcyan{background:cyan;}
div.bjcyan{background:cyan;}
div.bgc{background:cyan;}
div.bjc{background:cyan;}
div.bgblue{background:blue;}
div.bjblue{background:blue;}
div.bgb{background:blue;}
div.bjb{background:blue;}
div.bgpurple{background:purple;}
div.bjpurple{background:purple;}
div.bgp{background:purple;}
div.bjp{background:purple;}
div.bgpink{background:pink;}
div.bjpink{background:pink;}
div.bgpi{background:pink;}
div.bjpi{background:pink;}
div.com{padding:30px 0px; background:#eee;}
div.com:nth-child(2n+1){background:#fff;}
div.com div.codeBut{width:120px; height:35px; line-height:35px; text-align:center; cursor:pointer; background:#F88E8B; color:#fff;  margin:30px auto 0px; font-size:24px;}
div.codeBox{width:1000px; padding:10px; border:1px solid #ddd; margin:20px auto 0px; display:none; background:#fff; }
</style>
</head>
<body>
<!-------------------------------------------------->
<!-------------------------------------------------->
<!-------------------------------------------------->
<style type='text/css'>
div.com1 div.container{border:1px solid red; }
</style>
<div class='com'>
	<style type="text/css">
	div.InfiniterScroll{width:1040px; height:200px; margin:50px auto 0px;}
	ul.InfiniterScroll li{width:200px; height:200px; margin-right:10px;}
	</style>
	<div class="InfiniterScroll">
		<ul class="InfiniterScroll">
			<li class='con' style='background:red;'></li>
			<li class='con' style='background:orange;'></li>
			<li class='con' style='background:yellow;'></li>
			<li class='con' style='background:green;'></li>
			<li class='con' style='background:cyan;'></li>
			<li class='con' style='background:blue;'></li>
			<li class='con' style='background:purple;'></li>
		</ul>
	</div>
	<script type='text/javascript'>
		$("ul.InfiniterScroll").InfiniterScroll({
			autoPlay:true,
			IntervalTime:15,
			showSum:5
		});
	</script>
	<div class='codeBut'>代码一</div>
	<div class='codeBox'>111111111111</div>
</div>
<!-------------------------------------------------->
<!-------------------------------------------------->
<!-------------------------------------------------->
<div class='com'>
	<style type="text/css">
	/*使用只需改变height:540px;*/
	div.bannerBox{height:500px; margin-bottom:50px;}
	/*更改ul.bannerBut的高度 调整底部li的下边距*/
	ul.bannerBut{height:35px; text-align:center; z-index:12;}
	ul.bannerBut li{width:10px; height:10px; margin-right:10px; display:inline-block; color:#fff; background:#fff; cursor:pointer;}
	ul.bannerBut li.bannerButHover{background:blue;}
	/*修改div.bannerLeftRight的top:230px;的值 调整左右按钮距离上面的高度*/
	div.bannerLeftRight{width:100%; height:80px; position:absolute; top:230px;}
	div.bannerLeftRightBox{width:1200px; height:inherit; margin:0px auto; position:relative;}
	div.bannerLeftRightBox span{display:block; display:none; width:45px; height:inherit; position:absolute; top:0px; z-index:20; cursor:pointer; background:#ccc; font-size:30px; text-align:center; line-height:80px; color:#fff; }
	div.bannerLeftRightBox span.butRight{right:0px;}
	div.bannerLeftRightBox span.butLeft{left:0px;}
	</style>
	<div class="bannerBox">
		<ul class="bannerChange">
			<li class='con' style="background:red;"></li>
			<li class='con' style="background:orange;"></li>
			<li class='con' style="background:yellow;"></li>
			<li class='con' style="background:green;"></li>
			<li class='con' style="background:cyan;"></li>
			<li class='con' style="background:blue;"></li>
		</ul>
		<ul class='bannerBut'></ul>
		<div class="bannerLeftRight">
			<div class="bannerLeftRightBox">
				<span class="butRight">&gt;</span>
				<span class="butLeft">&lt;</span>
			</div>
		</div>
	</div>
	<script type='text/javascript'>
	$("ul.bannerChange").bannerChange({
		fadeInTime:'2000',
		fadeOutTime:'1000',
		setInterValTime:'3000',
		autoPlay:true,//默认true
		ifLeftRightClick:true,//默认true
		butRight:'span.butRight',//左按钮
		butLeft:'span.butLeft',//右按钮
	});
	</script>
	<div class='codeBut'>代码二</div>
	<div class='codeBox'>222222222</div>
</div>
<!-------------------------------------------------->
<!-------------------------------------------------->
<!-------------------------------------------------->
<div class='com'>
	<style type="text/css">
	/*singleLeftRightChangeBut star*/
	div.singleLeftRightChangeBut{width:150px; margin:30px auto 15px; overflow:hidden; text-align:center;}
	div.singleLeftRightChangeBut a{display:block; width:45px; height:79px; line-height:79px; font-size:60px; font-weight:bold;  background:#ddd; color:#fff;}
	div.singleLeftRightChangeBut a.singleLeftRightChangeLeft{float:left;}
	div.singleLeftRightChangeBut a.singleLeftRightChangeRight{float:right;}
	/*singleLeftRightChange end*/
	div.singleLeftRightChange{width:1040px; height:200px; margin:20px auto;}
	ul.singleLeftRightChange li{width:200px; height:200px; margin-right:10px;}
	</style>
	<div class="singleLeftRightChangeBut">
		<a href="javascript:;" class='singleLeftRightChangeLeft'>&lt;</a>
		<a href="javascript:;" class='singleLeftRightChangeRight'>&gt;</a>
	</div>
	<div class="singleLeftRightChange">
		<ul class="singleLeftRightChange">
			<li class='con' style="background:red;"></li>
			<li class='con' style="background:orange;"></li>
			<li class='con' style="background:yellow;"></li>
			<li class='con' style="background:green;"></li>
			<li class='con' style="background:cyan;"></li>
			<li class='con' style="background:blue;"></li>
		</ul>
	</div>
	<script type="text/javascript">
	$('ul.singleLeftRightChange').singleLeftRightChange({
		autoplay:true,
		showsum:5,
		animateTime:500,
		setIntervalTime:2000,
		leftBut:'a.singleLeftRightChangeLeft',
		rightBut:'a.singleLeftRightChangeRight'
	});
	</script>
	<div class='codeBut'>代码三</div>
	<div class='codeBox'>3333</div>
</div>
<!-------------------------------------------------->
<!-------------------------------------------------->
<!-------------------------------------------------->
<div class='com'>
	<style type="text/css">
	div.LeftRightClickChangeBut{width:90px; height:80px; margin:0px auto;}
	a.LeftRightClickChangeBut{display:inline-block; width:40px; height:60px; text-align:center; line-height:60px; color:#fff; background:#C8C8C8; font-size:25px; color:#fff; font-weight:bold; }
	/**/
	div.LeftRightClickChange{width:928px; height:177px; margin-top:30px; margin:0px auto; overflow:hidden; position:relative;}
	ul.LeftRightClickChange li{width:227px; height:175px; border:1px solid #C8C8C8; text-align:center; font-family:'隶书'; font-size:30px; line-height:175px; margin-right:3px; cursor:pointer;}
	ul.LeftRightClickChange li.liHover{background:#F88E8B;}
	</style>
	<div class="LeftRightClickChangeBut">                                            
		<a href="javascript:;" class="LeftRightClickChangeBut LeftRightClickChangeButLeft">&lt;</a>
		<a href="javascript:;" class="LeftRightClickChangeBut LeftRightClickChangeButRight">&gt;</a>
	</div>
	<div class="LeftRightClickChange">
		<div class="LeftRightClickChangeBox">
			<ul class="LeftRightClickChange">
				<li class='con liHover'>0</li>
				<li class='con'>1</li>
				<li class='con'>2</li>
				<li class='con'>3</li>
				<li class='con'>4</li>
				<li class='con'>5</li>
			</ul>
		</div>
	</div>
	<script type='text/javascript'>
	var oIndex = 0;
	var oLiSize = $('ul.LeftRightClickChange>li').size();
	$('ul.LeftRightClickChange').LeftRightClickChange({
		autoPlay:false,
		showSum:4,
		animateTime:500,
		setIntervalTime:1500,
		effect:'click',//hover or click
		liHover:'liHover',//添加的类名,默认liHover
		setClickBetweenTime:true,//是否设置点击间隔时间，false表示默认点击时间间隔为animateTime
		clickBetweenTime:100,//设置点击时间间隔,只有当设置点击时间为true时才有效
		LeftRightClickChangeButRight:'a.LeftRightClickChangeButRight',
		LeftRightClickChangeButLeft:'a.LeftRightClickChangeButLeft',
		onClickRightFunction:function(){
			oIndex++;
			oIndex = oIndex%oLiSize;
		},
		onClickLeftFunction:function(){
			oIndex--;
			if(oIndex == -1){oIndex = oLiSize-1};
		}
	});
	</script>
	<div class='codeBut'>代码四</div>
	<div class='codeBox'></div>
</div>
<!-------------------------------------------------->
<!-------------------------------------------------->
<!-------------------------------------------------->
<div class='com'>
	<style type="text/css">
	div.randomChange{width:760px; height:300px; margin:0px auto 50px; position:relative; overflow:hidden;}
	ul.randomChange{width:100%; height:inherit; position:relative;}
	ul.randomChange li.con{width:100%; height:inherit; position:absolute; top:0px; left:0px; text-align:center; line-height:300px; font-size:32px;}
	ul.randomChange li.con div{width:100%; height:inherit;}
	ul.randomChangeBut{width:100%; position:absolute; bottom:0px; height:35px; text-align:center; z-index:5;}
	ul.randomChangeBut li{width:10px; height:10px; margin-right:5px; cursor:pointer; border:1px solid #ddd; display:inline-block;}
	ul.randomChangeBut li.liHover{background:cyan;}
	/**/
	div.randomChangeLeftRightBut{width:120px; height:60px; position:relative; margin:50px auto 20px;}
	a.randomChangeLeftRightBut{display:inline-block; width:40px; height:60px; text-align:center; line-height:60px; color:#fff; background:#C8C8C8; font-size:25px; color:#fff; font-weight:bold; position:absolute;}
	a.randomChangeLeftRightButLeft{left:0px;}
	a.randomChangeLeftRightButRight{right:0px;}
	/* changeButList */
	div.changeButList{width:560px; height:70px; margin:0px auto; text-align:center;}
	div.changeButList a{display:inline-block; width:50px; height:50px;}
	</style>
	<div class="randomChangeLeftRightBut">
		<a href="javascript:;" class='randomChangeLeftRightBut randomChangeLeftRightButLeft'>&lt;</a>
		<a href="javascript:;" class='randomChangeLeftRightBut randomChangeLeftRightButRight'>&gt;</a>
	</div>
	<div class='changeButList'>
		<a href='javascript:;' style='background:red;'></a>
		<a href='javascript:;' style='background:orange;'></a>
		<a href='javascript:;' style='background:yellow;'></a>
		<a href='javascript:;' style='background:green;'></a>
		<a href='javascript:;' style='background:cyan;'></a>
		<a href='javascript:;' style='background:blue;'></a>
		<a href='javascript:;' style='background:purple;'></a>
	</div>
	<div class="randomChange">			
		<ul class="randomChange">
			<li class='con'><div style='background:red;'></div></li>
			<li class='con'><div style='background:orange;'></div></li>
			<li class='con'><div style='background:yellow;'></div></li>
			<li class='con'><div style='background:green;'></div></li>
			<li class='con'><div style='background:cyan;'></div></li>
			<li class='con'><div style='background:blue;'></div></li>
			<li class='con'><div style='background:purple;'></div></li>
		</ul>
		<ul class="randomChangeBut"></ul>		
	</div>
	<script type='text/javascript'>
	var oIndex = 0;
	var liSize = $('ul.randomChange>li').size();
	$('ul.randomChange').randomChange({
		autoPlay:false,//是否自动切换 默认true
		fourDirection:false,//是否四个方向切换 默认false表示八个方向
		twoDirection:false,//是否两个方向切换 默认为false		
		ifupDownDirection:false,//是否上下两个方向切换 只有当twoDirection:true才有效，默认false 左右两个方向切换
		oneDirection:false,//是否一个方向移动，只有当twoDirection:true才有效， 左右切换默认是向左，左右切换默认是向上
		animateTime:500,
		setInterValTime:2000,
		setClickBetweenTime:false,//是否设置点击间隔时间,默认false,false表示默认点击时间间隔为animateTime
		clickBetweenTime:100,//只有当设置点击时间为true时才有效
		randomChangeBut:'ul.randomChangeBut',
		randomChangeLeftRightButLeft:'a.randomChangeLeftRightButLeft',
		randomChangeLeftRightButRight:'a.randomChangeLeftRightButRight',
		onClickRightFunction:function(){
			oIndex++;
			oIndex = oIndex%liSize;
		},
		onClickLeftFunction:function(){
			oIndex--;
			if(oIndex ==-1){oIndex = liSize-1};
		}
	});
	$('ul.randomChangeBut>li').click(function(){
		oIndex = $(this).index();
		console.log(oIndex);
	});
	//changeButList
	var ButListIndex = '';
	var ButListSize = $('div.changeButList>a').size();
	$('div.changeButList>a').click(function(){
		ButListIndex = $(this).index();
		$('ul.randomChangeBut>li').eq(ButListIndex).trigger('click');
		console.log(ButListIndex);
	});
	</script>
	<div class='codeBut'>代码五</div>
	<div class='codeBox'>5555</div>
</div>
<!-------------------------------------------------->
<!-------------------------------------------------->
<!-------------------------------------------------->
<div class='com'>
	<style type="text/css">
	/*partFiveBotConFrTwo star*/
	div.UpDownClickChangeBut{width:90px; height:60px; margin:30px auto; position:relative;}
	a.UpDownClickChangeBut{width:40px; height:60px; text-align:center; line-height:60px; color:#fff; background:#C8C8C8; font-size:25px; color:#fff; font-weight:bold; display:block; position:absolute;}
	a.UpDownClickChangeButLeft{left:0px;}
	a.UpDownClickChangeButRight{right:0px;}
	/**/
	div.UpDownClickChange{width:200px; height:469px; margin:30px auto 0px;}
	ul.UpDownClickChange li{width:198px; height:100px; border:1px solid #C8C8C8; text-align:center; font-family:'隶书'; font-size:30px; line-height:100px; margin-bottom:20px; cursor:pointer;}
	ul.UpDownClickChange li.liHover{background:#F2F2F2;}
	</style>
	<div class="UpDownClickChangeBut">
		<a href="javascript:;" class='UpDownClickChangeBut UpDownClickChangeButLeft'>&lt;</a>
		<a href="javascript:;" class='UpDownClickChangeBut UpDownClickChangeButRight'>&gt;</a>
	</div>
	<div class="UpDownClickChange pr">						
		<div class="UpDownClickChangeBox">
			<ul class="UpDownClickChange">
				<li class='liHover con'>1</li>
				<li class='con'>2</li>
				<li class='con'>3</li>
				<li class='con'>4</li>
				<li class='con'>5</li>
				<li class='con'>6</li>
			</ul>
		</div>
	</div>
	<script type='text/javascript'>
	var oIndex = 0;
	var oliSize = $('ul.UpDownClickChange>li').size();
	$('ul.UpDownClickChange').UpDownClickChange({
		effect:'click',//触发方式 hover click
		liHover:'liHover',
		autoPlay:false,//是否自动滚动
		setIntervalTime:1500,//定时器时间
		animateTime:500,//切换时间
		showSum:4,//展示数量
		setClickBetweenTime:true,//是否设置点击间隔时间，false表示默认点击时间间隔为 animateTime
		clickBetweenTime:0,//只有当设置点击时间为true时才有效
		UpDownClickChangeButLeftRight:true,//是否要进行左右点击
		UpDownClickChangeButRight:'a.UpDownClickChangeButRight',//右点击按钮
		UpDownClickChangeButLeft:'a.UpDownClickChangeButLeft',//左点击按钮		
		onClickRightFunction:function(){
			oIndex++;
			oIndex = oIndex%oliSize;
		},
		onClickLeftFunction:function(){
			oIndex--;
			if(oIndex == -1){oIndex = oliSize-1};
		}
	});
	</script>
	<div class='codeBut'>代码六</div>
	<div class='codeBox'>6666</div>
</div>
<!-------------------------------------------------->
<!-------------------------------------------------->
<!-------------------------------------------------->
<div class='com'>
	<style type="text/css">
	div.TopBotInfiniterScrollBut{width:450px; height:35px; background:#eee; position:relative; border:1px solid #CCCCCC; border-bottom:none; margin:20px auto 0px;}
	div.TopBotInfiniterScrollBut a{display:block; width:9px; height:5px; position:absolute; top:14px;}
	a.TopBotInfiniterScrollButTop{right:8px; background:red;}
	a.TopBotInfiniterScrollButBot{right:25px; background:blue;}
	/**/
	div.TopBotInfiniterScroll{width:450px; height:176px; border:1px solid #CCCCCC; background:#fff; border-top:none; margin:0px auto;}
	ul.TopBotInfiniterScroll{padding-left:10px;}
	ul.TopBotInfiniterScroll li{height:35px; line-height:35px;}
	</style>
	<div class="TopBotInfiniterScrollBut">
		<a href="javascript:;" class="TopBotInfiniterScrollButTop"></a>
		<a href="javascript:;" class="TopBotInfiniterScrollButBot"></a>
	</div>
	<div class="TopBotInfiniterScroll">
		<ul class="TopBotInfiniterScroll">
			<li class='con'>我是第一个文字</li>
			<li class='con'>我是第二个文字</li>
			<li class='con'>我是第三个文字</li>
			<li class='con'>我是第四个文字</li>
			<li class='con'>我是第五个文字</li>
			<li class='con'>我是第六个文字</li>
		</ul>
	</div>
	<script type="text/javascript">
	$("ul.TopBotInfiniterScroll").TopBotInfiniterScroll({        
		ShowSum:5,
		setInterValTime:35,
		autoPlay:true,//是否自动滚
		OnOff:false,//是否向上滚, 默认false向上滚,
		scrollTopButTop:'a.TopBotInfiniterScrollButTop',
		scrollTopButBot:'a.TopBotInfiniterScrollButBot'
	});
	</script>
	<div class='codeBut'>代码七</div>
	<div class='codeBox'>7777</div>
</div>
<!-------------------------------------------------->
<!-------------------------------------------------->
<!-------------------------------------------------->
<div class='com'>
	<style type="text/css">
	ul.Accordion{width:380px; margin:50px auto; border:1px solid #eee;}
	ul.Accordion li.con div.Accordion div{width:100%; height:210px; }
	ul.Accordion li.hover h3{display:none;}
	ul.Accordion li.hover div.Accordion{display:block;}
	div.Accordion{display:none;}
	</style>
	<ul class="Accordion">
		<li class="con hover">
			<h3>我是第一个文字标题</h3>
			<div class="Accordion"><div style='background:red;'></div></div>
		</li>
		<li class="con">
			<h3>我是第二个文字标题</h3>
			<div class="Accordion"><div style='background:orange;'></div></div>
		</li>
		<li class="con">
			<h3>我是第二个文字标题</h3>
			<div class="Accordion"><div style='background:yellow;'></div></div>
		</li>
	</ul>
	<script type='text/javascript'>
	$('ul.Accordion').Accordion({
		autoplay:false,
		setInterValTime:3000,
		trigger:'click',//click or hover 默认click
		effect:'slide'//slide or show 默认slide
	});
	</script>
	<div class='codeBut'>代码八</div>
	<div class='codeBox'>8888</div>
</div>
<!-------------------------------------------------->
<!-------------------------------------------------->
<!-------------------------------------------------->
<div class='com'>
	<div class='rightFloatBox' style='margin:0px auto; width:600px; height:150px; background:#fff; text-align:center; line-height:150px; font-size:60px;'>rightFloat</div>
	<style type="text/css">
	div.rightFloat{width:130px; height:440px; background:cyan; margin-left:100px; position:absolute; right:0px; top:100px; z-index:150;}
	</style>
	<div class='rightFloat'></div>
	<script type="text/javascript">
	$('div.rightFloat').rightFloat({
		theTop:150,//距离上面的距离
		overflowTop:50//超过后距离上面的距离
	});
	</script>
	<div class='codeBut'>代码九</div>
	<div class='codeBox'>9999</div>
</div>
<!-------------------------------------------------->
<!-------------------------------------------------->
<!-------------------------------------------------->
<div class='com'>
	<div class='clickBackTopBox' style='margin:0px auto; width:600px; height:150px; background:#fff; text-align:center; line-height:150px; font-size:60px; background:#EEEEEE;'>clickBackTop</div>
	<style type="text/css">
	div.clickBackTop{width:130px; height:100px; line-height:100px; position:fixed; bottom:20px; right:0px; z-index:200; background:orange; cursor:pointer;}
	</style>
	<div class='clickBackTop'></div>
	<script type='text/javascript'>
	$('div.clickBackTop').clickBackTop({
		Dstance:30,//距离
		setIntervalTime:20,//时间        
	});
	</script>
	<div class='codeBut'>代码十</div>
	<div class='codeBox'>1010</div>
</div>
<!-------------------------------------------------->
<!-------------------------------------------------->
<!-------------------------------------------------->
<div class='com'>
	<style type='text/css'>
	div.infeedAccordion{width:800px; height:350px;  margin:50px auto; background:pink;}
	ul.infeedAccordion{width:120%; height:inherit;}
	ul.infeedAccordion li.con{width:85px; height:inherit; float:left;}
	ul.infeedAccordion li.liHover{width:460px;}
	</style>
	<div class='infeedAccordion'>
		<ul class='infeedAccordion'>
			<li class='con' style='background:red;'></li>
			<li class='con' style='background:orange;'></li>
			<li class='con liHover' style='background:yellow;'></li>
			<li class='con' style='background:green;'></li>
			<li class='con' style='background:cyan;'></li>
		</ul>
	</div>
	<script type='text/javascript'>
	$('ul.infeedAccordion').infeedAccordion({
		animateTime:500,
		setIntervalTime:2500,
		autoPlay:false,
		effect:'click',//click or hover
		onClickFunction:function(){}
	});
	</script>
	<div class='codeBut'>代码十一</div>
	<div class='codeBox'>111111</div>
</div>
<!-------------------------------------------------->
<!-------------------------------------------------->
<!-------------------------------------------------->
<div class='com'>
	<style type='text/css'>
	div.verticalAccordion{width:600px; height:400px;  margin:50px auto; background:pink;}
	ul.verticalAccordion{width:100%; height:inherit;}
	ul.verticalAccordion li{width:100%; height:50px;}
	ul.verticalAccordion li.liHover{width:100%; height:200px;}
	</style>
	<div class='verticalAccordion'>
		<ul class='verticalAccordion'>
			<li class='con' style='background:red;'></li>
			<li class='con' style='background:orange;'></li>
			<li class='con liHover' style='background:yellow;'></li>
			<li class='con' style='background:green;'></li>
			<li class='con' style='background:cyan;'></li>
		</ul>
	</div>
	<script type='text/javascript'>
	$('ul.verticalAccordion').verticalAccordion({
		animateTime:500,
		setIntervalTime:2500,
		autoPlay:false,
		effect:'click',//click or hover
		onClickFunction:function(){}
	});
	</script>
	<div class='codeBut'>代码十二</div>
	<div class='codeBox'>121212</div>
</div>
<!-------------------------------------------------->
<!-------------------------------------------------->
<!-------------------------------------------------->
<div class='com'>
	<style type="text/css">
	/*leftRightTabChangeBut star*/
	div.leftRightTabChangeBut{width:150px; margin:30px auto 15px; overflow:hidden; text-align:center;}
	div.leftRightTabChangeBut a{display:block; width:45px; height:79px; line-height:79px; font-size:60px; font-weight:bold;  background:#ddd; color:#fff;}
	div.leftRightTabChangeBut a.leftRightTabChangeLeft{float:left;}
	div.leftRightTabChangeBut a.leftRightTabChangeRight{float:right; }
	/*leftRightTabChangeListBut start*/
	div.leftRightTabChangeListBut{width:600px; height:50px; margin:0px auto; padding-left:100px; }
	div.leftRightTabChangeListBut a{width:60px; height:50px; line-height:50px; float:left; display:block; text-align:center; margin-right:13px; }
	/*leftRightTabChange start*/
	div.leftRightTabChange{width:500px; overflow:hidden; height:200px; margin:20px auto; position:relative;}
	ul.leftRightTabChange{width:100%; overflow:hidden; position:absolute; top:0px; left:0px;}
	ul.leftRightTabChange li.con{width:500px; height:200px; }
	</style>
	<div class="leftRightTabChangeBut">
		<a href="javascript:;" class='leftRightTabChangeLeft'>&lt;</a>
		<a href="javascript:;" class='leftRightTabChangeRight'>&gt;</a>
	</div>
	<div class='leftRightTabChangeListBut'>
		<a href="javascript:;" class='con' style="background:red;"></a>
		<a href="javascript:;" class='con' style="background:orange;"></a>
		<a href="javascript:;" class='con' style="background:yellow;"></a>
		<a href="javascript:;" class='con' style="background:green;"></a>
		<a href="javascript:;" class='con' style="background:cyan;"></a>
		<a href="javascript:;" class='con' style="background:blue;"></a>
		<a href="javascript:;" class='con' style="background:purple;"></a>
	</div>
	<div class="leftRightTabChange">
		<ul class="leftRightTabChange">
			<li class='con' style="background:red;"></li>
			<li class='con' style="background:orange;"></li>
			<li class='con' style="background:yellow;"></li>
			<li class='con' style="background:green;"></li>
			<li class='con' style="background:cyan;"></li>
			<li class='con' style="background:blue;"></li>
			<li class='con' style="background:purple;"></li>
		</ul>
	</div>
	<script type="text/javascript">
	$('ul.leftRightTabChange').leftRightTabChange({
		autoPlay:false,
		leftRightChange:false,//默认true为左右切换，false为上下切换
		animateTime:500,
		setIntervalTime:2000,
		setClickBetweenTime:false,//是否设置点击时间间隔
		clickBetweenTime:'800',//设置点击时间间隔 只有当setClickBetweenTime:true时才有效
		leftRightTabChangeListBut:'div.leftRightTabChangeListBut',
		leftBut:'a.leftRightTabChangeLeft',
		rightBut:'a.leftRightTabChangeRight',
		onClickRightFunction:function(){},
		onClickLeftFunction:function(){}
	});
	</script>
	<div class='codeBut'>代码十三</div>
	<div class='codeBox'></div>
</div>
<!-------------------------------------------------->
<!-------------------------------------------------->
<!-------------------------------------------------->
<div class='com'>
	<div class="clickBackTopBox" style="margin:0px auto; width:600px; height:150px; background:#fff; text-align:center; line-height:150px; font-size:46px; background:#EEEEEE;">时间和时间戳的转换</div>
	<script type='text/javascript'>
		// DateToUnix 时间转为时间戳
		var oDate = "2017-06-22";
		var oDate = $.myTime.DateToUnix(oDate);
		console.log(oDate);//1498060800
		//UnixToDate 时间戳转为时间
		var oUnix = '1498060800';
		var oUnix = $.myTime.UnixToDate(oUnix);
		console.log(oUnix);//2017-06-22
	</script>
	<div class='codeBut'>代码十四</div>
	<div class='codeBox'>14141414</div>
</div>
<!-------------------------------------------------->
<!-------------------------------------------------->
<!-------------------------------------------------->
<!-- 
<div class='com'>
	<div class='codeBut'>代码</div>
	<div class='codeBox'></div>
</div>
-->
<div style='width:100%; height:500px;'></div>
<script type='text/javascript'>
(function(){
	$('div.com').each(function(index){
		$(this).find('div.codeBut').click(function(){
			$('div.com').eq(index).find('div.codeBox').stop(true).slideToggle();
		});
	});
})();
</script>
</body>
</html>